import { InputNumber, Radio } from 'antd';
import styles from './index.module.less';
import { CheckOutlined } from '@ant-design/icons';
import { useState, forwardRef, useImperativeHandle } from 'react';

const TradeStrategy = forwardRef(({ curTab }: any, ref: any) => {
  const [tabs, setTabs] = useState<any>({
    zhiYing: false,
    ice: false,
    jianCang: false,
  });
  const [zhiYingPrice, setZhiYingPrice] = useState<any>();
  const [zhiSunPrice, setZhiSunPrice] = useState<any>();
  const [iceNum, setIceNum] = useState<any>();

  // 暴露子组件方法
  useImperativeHandle(ref, () => ({
    getZhiYingInfo: getZhiYingInfo,
  }));

  const MyBox = ({ tab, name }: any) => (
    <div className={`${styles.tleft} flex`}>
      <div
        className={`${styles.tbox} ${tabs[tab] && styles.tboxAct} center `}
        onClick={() => changeBox(tab)}
      >
        <CheckOutlined />
      </div>
      <div className={`${styles.txt}`}>{name}</div>
    </div>
  );

  function changeBox(val: any) {
    console.log('val: ', val, tabs[val]);
    const isAct = tabs[val];
    const _obj = { ...tabs };
    if (val === 'zhiYing' && !isAct) {
      _obj.jianCang = false;
    } else if (val === 'jianCang' && !isAct) {
      _obj.zhiYing = false;
    }
    _obj[val] = !isAct;
    setTabs(_obj);
  }

  function getZhiYingInfo() {
    const obj = {
      ...tabs,
      zhiYingPrice,
      zhiSunPrice,
      iceNum,
    };
    return obj;
  }

  return (
    <div className={`${styles.zhiYingCpn} flex`}>
      {/* <div className={`${styles.trow}`}>
        <div className={`${styles.ttop} flex`}>
          <MyBox name="止盈/止损" tab="zhiYing" />
          <div className={`${styles.tright} flex`}>
            <div className={`${styles.xxx}`}></div>
            {tabs.zhiYing && (
              <Radio.Group
                name="radiogroup"
                defaultValue={1}
                options={[
                  { value: 1, label: '多' },
                  { value: 2, label: '空' },
                ]}
              />
            )}
          </div>
        </div>
        {tabs.zhiYing && (
          <div className={`${styles.rowCon}`}>
            <InputNumber
              prefix="止盈"
              suffix="USDT"
              style={{ width: '100%' }}
              value={zhiYingPrice}
              onChange={(val) => setZhiYingPrice(val)}
            />
            <InputNumber
              prefix="止损"
              suffix="USDT"
              style={{ width: '100%' }}
              value={zhiSunPrice}
              onChange={(val) => setZhiSunPrice(val)}
            />
          </div>
        )}
      </div> */}
      {curTab === 'xianJia' && (
        <div className={`${styles.trow}`}>
          <div className={`${styles.ttop} flex`}>
            <MyBox name="冰山委托" tab="ice" />
          </div>
          {tabs.ice && (
            <div className={`${styles.rowCon}`}>
              <InputNumber
                prefix="显示数量"
                suffix="BTC"
                style={{ width: '100%' }}
                value={iceNum}
                onChange={(val) => setIceNum(val)}
              />
            </div>
          )}
        </div>
      )}
      <div className={`${styles.trow}`}>
        <div className={`${styles.ttop} flex`}>
          <MyBox name="只减仓" tab="jianCang" />
        </div>
      </div>
      <div className={`${styles.xxx}`}></div>
      <div className={`${styles.xxx}`}></div>
    </div>
  );
});
export default TradeStrategy;
